<template>
	<view>
		<view class="custom-bg-white">
			<uni-row :gutter="gutter" :width="nvueWidth" style="align-items: center; display: flex;">
				<uni-col :span="22" style="overflow-x: hidden;">
					<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
						:scroll-into-view="scrollInto">
						<view v-for="(tab,index) in tabBars" :key="index" class="uni-tab-item" :id="tab.newsTabCode"
							:data-current="index" @click="ontabtap">
							<text class="uni-tab-item-title"
								:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.newsTabName}}</text>
						</view>
					</scroll-view>
				</uni-col>
				<uni-col :span="2" style="background-color: #fff;">
					<image @click="toggle('top')" style="width: 72rpx; " mode="widthFix"
						src="https://staticfile-yj.obs.myhuaweicloud.com/other-list.png"></image>
				</uni-col>
			</uni-row>
		</view>
		<view class="tab-con" v-for="(list,index) in tabBars" :key="index">
			<template v-if="index == tabIndex">
				<view v-if="!list.leafFlag">
					<view v-for="item in list.children" :key="item.newsTabCode">
						<view class="content" v-if="item.newsTabCode == '101101'">
							<view class="dayread"
								@click="goTo(`../newsDetails/newsDetails?id=${item.childrenList.list[0].id}`)">
								<view v-if="item.childrenList.list[0].image">
									<image
										:src="listImgUrl + item.childrenList.list[0].image + '?x-image-process=style/style-list'"
										mode="widthFix"></image>
								</view>
								<view v-else>
									<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
										mode="widthFix"></image>
								</view>
								<text class="label">每日金句</text>
								<text class="title">{{item.childrenList.list[0].title}}</text>
							</view>
						</view>
						<view class="column" v-else>
							<view class="column-title">
								<image style="width: 20px; height: 20px; margin-right: 5px;"
									:src="item.newsTabCode == '101102'?'https://staticfile-yj.obs.myhuaweicloud.com/yangjiang-icon1.png':'https://staticfile-yj.obs.myhuaweicloud.com/yangjiang-icon2.png'"
									mode="aspectFit">
								</image>
								<text class="column-text">{{item.newsTabName}}</text>
								<view><text class="column-link"
										@click="goTo(`../newsList/newsList?id=${item.newsTabCode}`)">更多</text><uni-icons
										type="right" size="12" color="#646A74"></uni-icons>
								</view>
							</view>
							<view class="list2" v-for="tablist in item.childrenList.list" :key="tablist.id"
								@click="goTo(`../newsDetails/newsDetails?id=${tablist.id}`)">
								<view class="image" v-if="tablist.image">
									<image :src="listImgUrl + tablist.image + '?x-image-process=style/style-list'"
										mode="widthFix"></image>
								</view>
								<view class="image" v-else>
									<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
										mode="widthFix">
									</image>
								</view>
								<view class="list-con">
									<text class="text">{{tablist.title}}</text>
									<view class="info">
										<view><uni-icons type="calendar" size="12"
												color="#9498A0"></uni-icons><text>{{tablist.publishTime}}</text>
										</view>
										<view><uni-icons type="eye" size="12"
												color="#9498A0"></uni-icons><text>{{tablist.browseNum}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view v-else>
					<view class="column" style="margin-top: 15px;">
						<view class="list2" @click="goTo(`../newsDetails/newsDetails?id=${item.id}`)"
							v-for="(item) in list.childrenList.list" :key="item.id">
							<view class="image" v-if="item.image">
								<image :src="listImgUrl + item.image + '?x-image-process=style/style-list'"
									mode="widthFix"></image>
							</view>
							<view class="image" v-else>
								<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
									mode="widthFix">
								</image>
							</view>
							<view class="list-con">
								<text class="text">{{item.title}}</text>
								<view class="info">
									<view><uni-icons type="calendar" size="12"
											color="#9498A0"></uni-icons><text>{{item.publishTime}}</text>
									</view>
									<view><uni-icons type="eye" size="12"
											color="#9498A0"></uni-icons><text>{{item.browseNum}}</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="list.childrenList">
					<uni-load-more :status="LoadMore" v-if="list.childrenList.isLastPage"
						:content-text="contentText"></uni-load-more>
				</template>
			</template>

		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="coutom-channel">
				<view class="title">选择关注的频道</view>
				<uni-row :gutter="20">
					<uni-col :span="8" v-for="(tab,index) in displayTabBars" :key="index">
						<view class="item" :class="{active:favList.indexOf(tab.newsTabCode) != -1}"
							@click="checkFavTabs(tab.newsTabCode)">{{tab.newsTabName}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="footer">
				<uni-row :gutter="30">
					<uni-col :span="8">
						<button class="reset" @click="reset()">重置</button>
					</uni-col>
					<uni-col :span="16">
						<button class="confirm" @click="submitChanel()">确定（共选择{{favList.length}}个频道）</button>
					</uni-col>
				</uni-row>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		baseurl,
		listNewsChannel,
		appListNewsInfo,
		showNewsChannel,
		saveNewsChannel,
	} from "@/api/user.js"

	import {
		deepClone
	} from "@/utils/common.js"
	let listImgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				tabIndex: 0,
				tabBars: [],
				scrollInto: "",
				gutter: 0,
				nvueWidth: 730,
				type: 'center',
				listImgUrl,
				isFloor: true,
				favList: [],
				list: [],
				showLoadMore: false,
				LoadMore: 'noMore',
				contentText: {
					contentdown: '...',
					contentrefresh: '加载中',
					contentnomore: '暂无更多数据'
				},
				listObj: {},
				tabList: [],
				displayTabBars: [],
			};
		},
		onShow() {
			this.nvueWidth = getApp().globalData.windowWidth;
			console.log('nvuewidth', this.nvueWidth)
		},
		onReady() {
			console.log('load')
			this.listNewsChannel();
			showNewsChannel({}).then((data) => {
				this.tabBars = data.returnObj;
				this.initData();
			});
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.listNewsChannel();
			showNewsChannel({}).then((data) => {
				this.tabBars = data.returnObj;
				this.initData();
			});
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.tabIndex == 0) {
				return
			}
			if (this.tabBars[this.tabIndex].childrenList.isLastPage) {
				this.LoadMore = "noMore"
				return
			} else {
				this.LoadMore = "loading"
				let obj = {
					condition: {
						newsTabCode: this.tabBars[this.tabIndex].newsTabCode
					},
					pageNum: this.tabBars[this.tabIndex].childrenList.pageNum + 1,
					pageSize: 2
				}
				appListNewsInfo(options).then((res) => {
					let tempArr = this.tabBars[this.tabIndex].childrenList.list.concat(res.returnObj.list)
					this.tabBars[this.tabIndex].childrenList = res.returnObj;
					this.tabBars[this.tabIndex].childrenList.list = tempArr;
					if (this.tabBars[this.tabIndex].childrenList.isLastPage) {
						this.LoadMore = "noMore"
					} else {
						this.LoadMore = "more"
					}
				})
			}

		},
		methods: {
			async saveNewsChannel(options) {
				const res = await saveNewsChannel(options);
				if (res.success) {

				}
			},
			async listNewsChannel() {
				const res = await listNewsChannel();
				this.displayTabBars = res.returnObj
				this.displayTabBars.forEach((i) => {
					if (i.selectFlag == 1) {
						this.favList.push(i.newsTabCode)
					}
				})
			},
			initData() {
				this.tabIndex = 0;
				this.tabBars.forEach((tab) => {
					if (!tab.leafFlag) {
						tab.children.forEach((i) => {
							let options = {
								condition: {
									newsTabCode: i.newsTabCode
								},
								pageNum: 1,
								pageSize: i.newsTabCode == "101102" ? 2 : 3
							}
							appListNewsInfo(options).then((res) => {
								this.$set(i, 'childrenList', res.returnObj)
							})
						})
					} else {
						let options = {
							condition: {
								newsTabCode: tab.newsTabCode
							},
							pageNum: 1,
							pageSize: 10
						}
						appListNewsInfo(options).then((res) => {
							this.$set(tab, 'childrenList', res.returnObj)
						})
					}
				})
				console.log("tabbar", this.tabBars)
				uni.stopPullDownRefresh();
				//this.tabBars[0].
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			checkFavTabs(e) {
				if (this.favList.indexOf(e) == -1) {
					this.favList.push(e);
				} else {
					this.favList.splice(this.favList.indexOf(e), 1)
				}
			},
			clickLoadMore(e) {
				console.log('loadmore', this.tabIndex);
				this.showLoadMore = true;
				this.LoadMore = 'loading';
				appListNewsInfo({
					condition: {
						newsTabCode: this.tabBars[this.tabIndex].newsTabCode
					},
					pageNum: 1,
					pageSize: 10
				}).then((res) => {
					if (res.returnObj) {
						this.list = res.returnObj.list;
					}
					this.showLoadMore = false;
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			onTabBarChange(index) {
				this.activeIndex = index;
			},

			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				console.log("index", index)
				this.switchTab(index);
			},

			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			change() {

			},
			submitChanel() {
				console.log(this.favList)
				if (this.favList.length == 0) {
					uni.showToast({
						title: '您未选择收藏的频道，将为您展示所有频道！',
					})
				}
				saveNewsChannel(this.favList).then((res) => {
					if (res.success) {
						uni.showToast({
							title: '保存成功！'
						})
						setTimeout(() => {
							showNewsChannel({}).then((data) => {
								this.tabBars = data.returnObj;
								this.initData();
							});
							this.$refs.popup.close()
						}, 500)
					}
				});

			},
			reset() {
				this.favList = [];
				saveNewsChannel(this.favList).then((res) => {
					if (res.success) {
						uni.showToast({
							title: '重置成功！'
						})
						setTimeout(() => {
							showNewsChannel({}).then((data) => {
								this.tabBars = data.returnObj;
								this.initData();
							});
							this.$refs.popup.close()
						}, 500)
					}
				});
			},
			switchTab(index) {
				/* 				if (this.newsList[index].data.length === 0) {
									this.getList(index);
								}
				 */
				if (this.tabIndex === index) {
					return;
				}
				/* uni.getStorage({
					key: `city_${index}`,
				}).then((data) => {
					console.log('index_data', data)
					if (data[1]) {
						this.isFloor = data[1].data.leafFlag
						if (data[1].data.leafFlag) {
							console.log(111111)
							this.list = data[1].data.listObj.list
							if (this.list.length == 0) {
								this.showLoadMore = true;
								this.LoadMore = 'no-more'
							}
						} else {
							console.log(22222)
							this.listObj = data[1].data.listObj;
						}
					} else {
						let tempObj = {
							leafFlag: this.tabBars[index].leafFlag,
							columnId: this.tabBars[index].newsTabCode,
							listObj: {}
						}
						if (tempObj.leafFlag) {
							let options = {
								condition: {
									newsTabCode: this.tabBars[index].newsTabCode
								},
								pageNum: 1,
								pageSize: 10
							}
							appListNewsInfo(options).then((res) => {
								this.list = res.returnObj.list;
								tempObj.listObj = res.returnObj;
								uni.setStorage({
									key: `city_${index}`,
									data: tempObj,
									success: function() {
										console.log('city_success');
									}
								});
							})
						} else {
							let tempObj = {
								leafFlag: this.tabBars[index].leafFlag,
								columnId: this.tabBars[index].newsTabCode,
								listObj: {}
							}
							this.tabBars[index].children.forEach((i, index) => {
								let obj = {
									condition: {
										newsTabCode: i.newsTabCode
									},
									pageNum: 1,
									pageSize: 3
								}
								appListNewsInfo(obj).then((res) => {
									if (res.returnObj) {
										this.$set(tempObj.listObj, `column_${index}`, res
											.returnObj)
										this.$set(this.listObj, `column_${index}`, res
											.returnObj)

									}
								})
							})
							console.log('testArr0', tempObj)
							console.log('test', this.listObj)
							uni.setStorage({
								key: `city_${index}`,
								data: deepClone(tempObj),
								success: function() {
									console.log('city_success');
								}
							});
						}
					}
				})
				if (this.tabBars[index].leafFlag) {

				} else {
					this.isFloor = false;

				} */
				// 缓存 tabId
				// if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
				// 	let isExist = this.cacheTab.indexOf(this.tabIndex);
				// 	if (isExist < 0) {
				// 		this.cacheTab.push(this.tabIndex);
				// 		//console.log("cache index:: " + this.tabIndex);
				// 	}
				// }

				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].newsTabCode;

				// 释放 tabId
				// if (this.cacheTab.length > MAX_CACHE_PAGE) {
				// 	let cacheIndex = this.cacheTab[0];
				// 	this.clearTabData(cacheIndex);
				// 	this.cacheTab.splice(0, 1);
				// 	//console.log("remove cache index:: " + cacheIndex);
				// }
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.reset {
		background-color: #F0F1F1;
		border: none;
		font-size: 28rpx;
		border: none !important;
	}

	.footer {
		padding: 20px;
	}

	.confirm {
		background-color: #00B5DD !important;
		font-size: 28rpx;
		color: #ffffff;
		border: none !important;
	}

	/* list-tab */
	.swiper-box {
		display: flex;
		flex: 1;
		height: 1000px;
	}

	.swiper-item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.scroll-h {
		background-color: #ffffff;
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
	}

	.uni-tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #646A74;
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.uni-tab-item-title-active {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #283241;
		line-height: 72rpx;
		height: 72rpx;
		border-bottom: 3px solid #00C3CF;
	}

	.content {
		padding: 30rpx;
	}

	.dayread {
		position: relative;
		background-color: #F5F8FB;
	}

	.dayread image {
		width: 100%;
		border-radius: 8px 8px 0 0;
	}

	.dayread .label {
		position: absolute;
		left: 0;
		top: 0;
		background-image: url("https://staticfile-yj.obs.myhuaweicloud.com/Frame%20427318301.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 128rpx;
		height: 24px;
		line-height: 24px;
		text-align: center;
		font-size: 24rpx;
		color: #6C4913;
	}

	.dayread .title {
		display: block;
		color: #283241;
		font-size: 32rpx;
		line-height: 24px;
		max-height: 45px;
		font-weight: 500;
		padding: 0 30rpx 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.column {
		padding: 0 30rpx;
		margin-bottom: 15px;
	}
</style>